<template>
  <div class="tab-title-page my_index">
    <div class="flex data_wrap">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <!-- <el-form-item label="ID">
          <el-input v-model="searchForm.orderID" placeholder="请输入ID" clearable @keyup.enter.native="search" />
        </el-form-item> -->
        <el-form-item label="申请人姓名">
          <el-input v-model="searchForm.payee_name" placeholder="请输入商品名称" clearable @keyup.enter.native="search" />
        </el-form-item>
        <el-form-item label="申请人账户">
          <el-input v-model="searchForm.payee_account" placeholder="请输入用户名" clearable @keyup.enter.native="search" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" clearable>
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />申请记录
        </h5>
        <el-button @click="handleClick" type="primary">发起转账</el-button>
      </div>
      <el-table border :data="tableData">
        <el-table-column align="center" prop="id" label="ID" width="100" />
        <el-table-column align="center" prop="payee_account" label="申请人账户" />
        <el-table-column align="center" prop="payee_name" label="申请人姓名" />
        <el-table-column align="center" prop="withdrawal_amount" label="金额" />
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? '' : scope.row.status == 2 ? 'success' : scope.row.status == 3 ? 'warning' : 'danger'">
            {{ scope.row.status == 1 ? '申请中' : scope.row.status == 2 ? '已转账' : scope.row.status == 3 ? '未转账' : '取消转账' }}
          </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="out_biz_no" label="商户流水号" />
        <el-table-column align="center" prop="trans_id" label="流水ID" />
        <el-table-column align="center" prop="apply_time" label="申请时间" />
        <el-table-column align="center" prop="arrival_time" label="到账时间" />
        <el-table-column align="center" prop="apply_admin_id" label="操作人" />
        <el-table-column align="center" prop="refuse_reason" label="备注" />
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="info" plain size="small" @click="handleCancel(scope.row.id)" :disabled="scope.row.status==1?false:true">取消</el-button>
            <el-button type="success" size="small" plain @click="handlePass(scope.row.id)" :disabled="scope.row.status==2||scope.row.status==4?true:false">通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
      <transferDialogs ref="transferDialogs" @getList="getList" />
      <transRefuseDialogs ref="transRefuseDialogs" :transfer-id="transferId" @getList="getList" />
    </div>
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import { transRefuse,transList,transPass } from '@/api/finance'
import transferDialogs from './dialogs/transferDialogs'
import transRefuseDialogs from './dialogs/transRefuseDialogs'
import myDatePicker from '@/components/myDatePicker'

export default {
  components: { customPage,transferDialogs,transRefuseDialogs,myDatePicker },
  data() {
    return {
      tableData: [],
      searchForm:{
        payee_name:'',
        payee_account:'',
        status:'',
        arrival_time:''
      },
      transferId:'',
      statusList:[
        {id:1,name:'申请中'},{id:2,name:'已转账'},{id:3,name:'未转账'},{id:4,name:'取消转账'}
      ]
    }
  },
  methods: {
    handleClick(){
      this.$refs.transferDialogs.dialogVisible = true
    },
    handleCancel(id){
      this.transferId=id
      this.$refs.transRefuseDialogs.dialogVisible = true
    },
    handlePass(id){
      transPass({id}).then(res=>{
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getList()
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.arrival_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        payee_name:'',
        payee_account:'',
        status:'',
        arrival_time:''
      }
      this.getList()
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      transList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total || 0
      })
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.child_page {
  padding: 15px;
}

.data_wrap {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}

.money_icon {
  width: 55px;
  height: 55px;
  margin-right: 15px;
}

.money_data {
  font-size: 28px;
  margin-top: 10px;
}
</style>
